<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>部门名片</title>
		<script src="../../../javascript/api.js"></script>  <!--api.js必须放到最开头 -->
	    <script src="../../../javascript/axios.js"></script>
	    <script src="../../../javascript/vue.js"></script>
	    <script src="../../../javascript/jquery.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../javascript/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	    <style type="text/css">
	    	*{
	    		margin: 0;
	    		padding: 0;
	    		font-family: "微软雅黑";
	    	}
	    	li{
	    		list-style: none;
	    	}
	    	.title{
	    		width: 460px;
	    		height: 220px;
	    		background: #ddecfb;
	    		text-align: center;
	    	}
	    	.branch_name{
	    		font-size: 24px;
	    		color: #333333;
	    		padding: 0 20px;
	    	}
	    	.branch_img{
	    		margin:35px 0 20px 0;
	    		width: 75;
	    		height: 75px;
	    	}
	    	.branch_detail{
	    		/*margin-top: 35px;*/
	    		width: 100%;
	    		overflow-x: hidden;
	    		overflow-y: scroll;
	    		height: 328px;
	    		
	    	}
	    	.branch_detail ul{
	    		margin-top: 35px;	
	    	}
	    	.branch_detail li {
			    color: #999999;
			    font-size: 18px;
			    /* text-align: center; */
			    /*height: 42px;*/
			    line-height: 25px;
			    text-align: left;
			    margin: 0px 0px 15px 115px;
			}
			.branch_detail li span {
			    margin-left: 40px;
			    color: #333333;
			    display: inline-block;
    			width: 200px;
			}
			/*美化滚动条*/
			::-webkit-scrollbar-track-piece {
				/*滚动条凹槽的颜色，还可以设置边框属性*/
				background-color: #f8f8f8;
			}
						
			::-webkit-scrollbar {
				/*滚动条的宽度*/
				width: 7px;
				height: 7px;
			}
						
			::-webkit-scrollbar-thumb {
			/*滚动条的设置*/
				background-color: #dddddd;
				background-clip: padding-box;
				min-height: 28px;
			}
						
			::-webkit-scrollbar-thumb:hover {
				background-color: #bbb;
			}
			.span_div{
				 display: inline-block;
			    height: 43px;
			    vertical-align: top;
			}
	    </style>
	</head>
	<body>
		<div class="apiCheckBranch" id="apiCheckBranch">
			<div class="title">
				<img class="branch_img"  :src="branchImg"/>
				<p class="branch_name">{{branchTitle}}</p>
			</div>
			<div class="branch_detail">
				<ul>
					<li><div class="span_div">
						上级部门
					</div>
					<span v-if="branchDetail.upBranch!=''&&branchDetail.upBranch!=null">{{branchDetail.upBranch}}</span>
					<span v-else>无记录</span>
					</li>
					<li ><div class="span_div">
						办公电话
					</div>
						<span v-if="branchDetail.officePhone!=''&&branchDetail.officePhone!=null">
							{{branchDetail.officePhone}}
						</span>
						<span v-else>无记录</span>
					</li>
				</ul>
			</div>
		</div>
		<script src="../js/addressApi.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#apiCheckBranch",
				data:{
					loadingPerson:'',
					branchId :'',
					branchImg:'../../../images/adressList/brundHeadImg.png',
					branchTitle:'',
					branchDetail:{
						upBranch:'',
						officePhone:'',
					}
				},
				methods:{
					
				},
				mounted(){
					this.branchId = getParam('val');
					apiBranchDetail(this.branchId,this);
				}
				
			})
		</script>
	</body>
</html>
